<script lang="ts" setup>
import rightArrowIcon from '@/icons/right-arrow.svg?component'
import IdoList from '@/components/IdoList.vue'
import {useRouter} from "vue-router"

import {ref} from "vue"
import {IDO} from "@/types/ido"
import {upcomingList} from '@/views/fakeDb.js'
import {useI18n} from "vue-i18n";

const router = useRouter()
const {t} = useI18n()

const newIdoList = ref<IDO[]>([])
newIdoList.value = upcomingList
</script>

<template>
  <div class="new-ido-wrapper flex flex-col">
    <div class="new-ido-title" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="400">{{ t('message.home.new.title') }}</div>
    <div class="new-ido-intro" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">
      {{ t('message.home.new.intro') }}
    </div>

    <ido-list :list="upcomingList" class="w-full"></ido-list>

    <div class="more-ido" @click.stop="router.push({ name: 'IDO' })">
      <span>{{ t('message.home.new.all') }}</span>
      <right-arrow-icon class="right-arrow-icon inline-block"></right-arrow-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.new-ido-wrapper {
  @apply xs:mx-6 sm:mx-20 md:mx-10 lg:mx-[228px] xl:mx-[228px];
}

.new-ido-title {
  font-size: 72px;
  font-family: DINPro-Bold, DINPro;
  font-weight: bold;
  color: #161615;
  margin-bottom: 24px;
  @apply xs:text-[32px] xs:mb-4 xs:text-center;
}

.new-ido-intro {
  width: 730px;
  font-size: 16px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  color: #7A7893;
  line-height: 26px;
  @apply xs:text-center xs:w-full;
}

.more-ido {
  align-self: center;
  margin-top: 32px;
  cursor: pointer;

  span {
    font-size: 20px;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
    color: #7A7893;
    margin-right: 18px;
  }

  .right-arrow-icon {
    width: 26px;
    height: 16px;
  }
}

</style>

